import React, { Component } from 'react'
// Route组件用来定义路由规则和匹配成功后要渲染的组件
//  + exact 设置为true精确匹配，默认不用写为false
//  + path 路由规则 它是模糊匹配
//  + component/render 指定要匹配成功后渲染的组件
// Link/NavLink 声明式导航组件,NavLink有激活样式，而Link没有，编译为html都为a标签
//  + to string|object 跳转到的路径
// NavLink
//  + exact 严格匹配
//  + activeClassName 自定义激活样式的名称，默认激活样式的名称为 active
// Switch 匹配路由规则只会执行1条规则
import { Route, Link, NavLink, Switch } from 'react-router-dom'

import Home from './views/Home'
import About from './views/About'
import Detail from './views/Detail'

class App extends Component {
  render() {
    return (
      <div>
        <div>
          <NavLink exact to="/">
            首页
          </NavLink>
          &nbsp;&nbsp;|&nbsp;&nbsp;
          <NavLink to="/about">关于</NavLink>
        </div>
        <hr />
        {/* Route它写在组件中，它也是依次去匹配渲染出来，不会存在匹配成功就不去渲染 */}
        {/* <Route exact path="/" component={Home} />
        <Route path="/about" component={About} /> */}
        {/* 匹配成功就不继续渲染 */}
        {/* 
          定义路由规则Route时一般多于Switch组件配合，一般定义规则的原则为：精确规则写在上面，模糊也在下面
        */}
        {/* 
          Route它会向要渲染的组件中通过props注入3个路由对象
           + history  用来进行编程式路由导航所用
           + location 用来获取数据
           + match    用来获取数据
        */}
        <Switch>
          <Route path="/about" component={About} />
          {/* 定义动态路由参数 */}
          {/* <Route path="/detail/:id" component={Detail} /> */}
          {/* 可选动态路由参数 */}
          <Route path="/detail/:id?" component={Detail} />
          <Route path="/" component={Home} />
        </Switch>
        <hr />
        <div>底部声明</div>
      </div>
    )
  }
}

export default App
